<template>
  <view class="content ba_img">
    <view
      class="header"
      :style="{
        background: isHeadBack ? 'rgba(39,39,39)' : 'rgba(0,0,0,0)',
      }"
    >
      <view class="title"> 微创 </view>
      <view class="jiahao">
        <u-icon
          size="20"
          name="plus"
          color="#EEEEEE"
          @click="createFn"
        ></u-icon>
      </view>
      <!-- tab固定 -->
      <view class="chooseIndex">
        <u-tabs
          class="tab_box"
          :style="{
            marginTop: height + 'px',
          }"
          :list="list4"
          lineWidth="0"
          lineColor="#f56c6c"
          :activeStyle="{
            color: '#EEEEEE',
            width: '144rpx',
            height: '56rpx',
            'line-height': '56rpx',
            'text-align': 'center',
            background: 'rgba(39,39,39,0.7)',
            'border-radius': '32rpx 32rpx 32rpx 32rpx',
            'font-size': '28rpx',
          }"
          :inactiveStyle="{
            width: '144rpx',
            height: '56rpx',
            'line-height': '56rpx',
            'text-align': 'center',
            background: 'rgba(39,39,39,0.7)',
            'border-radius': '32rpx 32rpx 32rpx 32rpx',
            color: '#ADADAD',
            'font-size': '28rpx',
          }"
          itemStyle="padding:0 20rpx; height: 56rpx'width: 144rpx"
          @change="change"
        >
        </u-tabs>
      </view>
    </view>
    <scroll-view
      :scroll-top="scrollTop"
      class="scroll_box"
      :style="{
        height: '100%',
        paddingTop: scrollHeihgt + 20 + 'px',
      }"
      :scroll-y="true"
      @scroll="scroll"
      @scrolltolower="scrolltolower"
    >
      <!-- <view class="chooseItem">
        <view
          class="chooseIndex"
          :style="{
            background: isHeadBack ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0)',
          }"
        >
          <u-tabs
            :list="list4"
            lineWidth="0"
            lineColor="#f56c6c"
            :activeStyle="{
              color: '#EEEEEE',
              width: '144rpx',
              height: '56rpx',
              'line-height': '56rpx',
              'text-align': 'center',
              background: 'rgba(39,39,39,0.5)',
              'border-radius': '32rpx 32rpx 32rpx 32rpx',
              'font-size': '28rpx',
            }"
            :inactiveStyle="{
              width: '144rpx',
              height: '56rpx',
              'line-height': '56rpx',
              'text-align': 'center',
              background: 'rgba(39,39,39,0.5)',
              'border-radius': '32rpx 32rpx 32rpx 32rpx',
              color: '#ADADAD',
              'font-size': '28rpx',
            }"
            itemStyle="padding:0 20rpx; height: 56rpx'width: 144rpx"
            @change="change"
          >
          </u-tabs>
        </view> -->
      <!-- 星云共创 -->
      <view v-if="currentIndex == 0">
        <!-- <commentBlock :list="feiList.data" :showAnTitle="true" :my_level_id="my_level_id"></commentBlock> -->
        <nebula
          :list="xingList.data"
          :showAnTitle="true"
          :my_level_id="my_level_id"
        ></nebula>
      </view>
      <!-- 诗心园 -->
      <view v-if="currentIndex == 1">
        <!-- <lingDD :list="lingList.data" :showAnTitle="true" :my_level_id="my_level_id"></lingDD> -->
        <poem
          :list="shiList.data"
          @updateShiList="updateShiList"
          :showAnTitle="true"
          :my_level_id="my_level_id"
        ></poem>
      </view>
      <!-- 游记 -->
      <view v-if="currentIndex == 2">
        <youji
          :list="youList.data"
          :my_level_id="my_level_id"
          :showAnTitle="true"
        ></youji>
      </view>
      <!-- 飞离洞 -->
      <view v-if="currentIndex == 3">
        <!-- <poem :list="shiList.data" @updateShiList="updateShiList" :showAnTitle="true" :my_level_id="my_level_id"></poem> -->
        <commentBlock
          :list="feiList.data"
          :showAnTitle="true"
          :my_level_id="my_level_id"
        ></commentBlock>
      </view>
      <!-- 灵感塔 -->
      <view v-if="currentIndex == 4">
        <!-- <wenIsland
          :familyList="wenList"
          @updateWenList="updateWenList"
          :showAnTitle="true"
          :my_level_id="my_level_id"
        ></wenIsland> -->
        <lingDD
          :list="lingList.data"
          :showAnTitle="true"
          :my_level_id="my_level_id"
        ></lingDD>
      </view>
      <!-- 文心岛 -->
      <view v-if="currentIndex == 5">
        <!-- <nebula :list="xingList.data" :showAnTitle="true" :my_level_id="my_level_id"></nebula> -->
        <wenIsland
          :familyList="wenList"
          @updateWenList="updateWenList"
          :showAnTitle="true"
          :my_level_id="my_level_id"
        ></wenIsland>
      </view>

      
      <view></view>
      <!-- </view> -->
    </scroll-view>
    <floatingBall></floatingBall>
    <!-- <player ref="player" :show="show" @colse="colse"></player> -->
  </view>
</template>

<script>
import commentBlock from "@/components/commentBlock.vue";
import lingDongT from "@/components/lingDongT.vue";
import wenIsland from "@/components/wenIsland.vue";
import lingDD from "@/components/lingDD.vue";
import nebula from "@/components/nebula.vue";
import poem from "@/components/poem.vue";
import youji from "@/components/youji.vue";
import { bofang_list, add_log } from "@/common/api/play.js"; // 播放
export default {
  components: {
    commentBlock,
    lingDD,
    wenIsland,
    nebula,
    poem,
    lingDongT,
    youji,
  },
  data() {
    return {
      scrollTop: 0,
      statusBarHeight: 0,
      height: 0,
      scrollHeihgt: 0,
      windowHeihgt: 0,
      list4: [
        {
          name: "星云共创",
        },
        {
          name: "诗心园",
        },
        {
          name: "游记",
        },
        {
          name: "飞离洞",
        },
        {
          name: "灵感塔",
        },
        {
          name: "文心岛",
        },
      ],
      isHeadBack: false,
      currentIndex: 0,
      feiList: {},
      shiList: {},
      wenList: {},
      xingList: {},
      lingList: {},
      youList: {},
      page: 1,
      last_page: 0,
      show: false,
      show1: true,
      my_level_id: 0,
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.windowHeihgt =
      statusBarHeight.windowHeight - statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".header")
        .boundingClientRect((data) => {
          this.height = data.height;
          // console.log("头部高度", data.height);
          // console.log("头部数据", data);
        })
        .exec();
    });

    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select(".title").fields({
        size: true,
      });
      query.select(".chooseIndex").fields({
        size: true,
      });

      query.exec((data) => {
        let sum = 0;
        data.forEach((item) => {
          sum += item.height;
        });
        this.scrollHeihgt = sum;
        // this.height = sum + 20;
        // console.log(data, "这个是啥");
      });
    });
  },
  onShow: function () {
    this.show = false;
    this.show1 = true;
    if (this.$refs.player) {
      this.$refs.player.setIntervalT();
    }
    if (this.currentIndex == 0) {
      // 星云共创
      this.getWeiChuangXing();
    } else if (this.currentIndex == 1) {
      // 诗心园
      this.getWeiChuangShi(1);
    } else if (this.currentIndex == 2) {
      // 游记
      this.getWeiChuangYou();
    } else if (this.currentIndex == 3) {
      // 飞离洞
      this.getWeiChuangFei();
    } else if (this.currentIndex == 4) {
      // // 灵感塔
      this.getWeiChuangLing();
    } else if (this.currentIndex == 5) {
      // 文心岛
      this.getWeiChuangWen(1);
    }
  },
  onHide() {
    this.show = false;
    this.show1 = false;
    if (this.$refs.player && this.$refs.player.times) {
      clearInterval(this.$refs.player.times);
    }
  },
  mounted() {
    // uni.onTabBarMidButtonTap((res) => {
    //   uni.navigateTo({
    //     url: "/pages/distinguish/galaxy",
    //   });
    // });
    // 飞离洞
    this.getWeiChuangFei();
  },
  methods: {
    // 跳转创建页面
    createFn() {
      uni.navigateTo({
        url: "/pages/bigResult/minute_create",
      });
    },
    change(e) {
      this.page = 1;
      this.last_page = 0;
      // console.log("eeeeeee", e);
      this.currentIndex = e.index;
      if (e.index == 0) {
        // 星云共创
        this.getWeiChuangXing();
      } else if (e.index == 1) {
        // 诗心园
        this.getWeiChuangShi(1);
      } else if (e.index == 2) {
        // 游记
        this.getWeiChuangYou();
      } else if (e.index == 3) {
        // 飞离洞
        this.getWeiChuangFei();
      } else if (e.index == 4) {
        // 灵感塔
        this.getWeiChuangLing();
      } else if (e.index == 5) {
        // 文心岛
        this.getWeiChuangWen(1);
      }
      this.scrollTop = 0;
      setTimeout(() => {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      }, 1000);
    },
    scroll(e) {
      //记录scroll  位置
      // this.scrollTop = e.detail.scrollTop;

      // console.log("触发");
      if (e.target.scrollTop == 0) {
        this.isHeadBack = false;
      } else {
        this.isHeadBack = true;
      }
    },
    scrolltolower() {
      if (this.page == this.last_page || this.last_page == 0) {
      } else {
        this.page++;
        if (this.currentIndex == 0) {
          // 星云共创
          this.getWeiChuangXing();
        } else if (this.currentIndex == 1) {
          // 诗心园
          this.getWeiChuangShi(1);
        } else if (this.currentIndex == 2) {
          // 游记
          this.getWeiChuangYou();
        } else if (this.currentIndex == 3) {
          // 飞离洞
          this.getWeiChuangFei();
        } else if (this.currentIndex == 4) {
          // 灵感塔
          this.getWeiChuangLing();
        } else if (this.currentIndex == 5) {
          // 文心岛
          this.getWeiChuangWen(1);
        }
      }
      // console.log("触发");
    },
    // 微创-飞离洞
    getWeiChuangFei() {
      // 飞离洞
      this.$http
        .weichuangGetList({ type: 1, page: this.page })
        .then((res) => {
          let data = res.data.list;
          // this.feiList = res.data.list;
          if (res.data.list.current_page == 1) {
            this.feiList = res.data.list;
          } else {
            this.feiList.data = this.feiList.data.concat(res.data.list.data);
          }
          this.last_page = res.data.list.last_page;
          for (let i = 0; i < this.feiList.data.length; i++) {
            this.feiList.data[i].clickable = false;
          }
          this.my_level_id = res.data.my_level_id;
          // this.user = data.user
          // console.log(data, "飞离洞");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 微创-灵感塔
    getWeiChuangLing() {
      // 灵感塔
      this.$http
        .weichuangGetList({ type: 2, page: this.page })
        .then((res) => {
          let data = res.data.list;
          // this.lingList = res.data.list;
          if (res.data.list.current_page == 1) {
            this.lingList = res.data.list;
          } else {
            this.lingList.data = this.lingList.data.concat(res.data.list.data);
          }
          this.last_page = res.data.list.last_page;
          for (let i = 0; i < this.lingList.data.length; i++) {
            this.lingList.data[i].clickable = false;
          }
          // console.log(data, "灵感塔");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 微创-诗心园
    getWeiChuangShi(order) {
      // 诗心园
      this.$http
        .weichuangGetList({ type: 3, order: order, page: this.page })
        .then((res) => {
          let data = res.data.list;
          // this.shiList = res.data.list;
          if (res.data.list.current_page == 1) {
            this.shiList = res.data.list;
          } else {
            this.shiList.data = this.shiList.data.concat(res.data.list.data);
          }
          this.last_page = res.data.list.last_page;
          for (let i = 0; i < this.shiList.data.length; i++) {
            this.shiList.data[i].clickable = false;
          }
          // this.user = data.user
          // console.log(data, "诗心园");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 微创-文心岛
    getWeiChuangWen(order) {
      // 文心岛
      this.$http
        .weichuangGetList({ type: 4, order: order, page: this.page })
        .then((res) => {
          let data = res.data.list;
          // this.wenList = res.data.list;
          if (res.data.list.current_page == 1) {
            this.wenList = res.data.list;
          } else {
            this.wenList.data = this.wenList.data.concat(res.data.list.data);
          }
          this.last_page = res.data.list.last_page;
          for (let i = 0; i < this.wenList.data.length; i++) {
            this.wenList.data[i].clickable = false;
          }
          // this.user = data.user
          // console.log(data, "文心岛");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 微创-星云共创
    getWeiChuangXing(order) {
      // 星云共创
      this.$http
        .weichuangGetList({ type: 7, page: this.page })
        .then((res) => {
          let data = res.data.list;
          // this.xingList = res.data.list;
          if (res.data.list.current_page == 1) {
            this.xingList = res.data.list;
          } else {
            this.xingList.data = this.xingList.data.concat(res.data.list.data);
          }
          this.last_page = res.data.list.last_page;
          for (let i = 0; i < this.xingList.data.length; i++) {
            this.xingList.data[i].clickable = false;
          }
          // this.user = data.user
          // console.log(this.xingList, "星云共创");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 微创-游记
    getWeiChuangYou(order) {
      // 游记
      this.$http
        .weichuangGetList({ type: 6, page: this.page })
        .then((res) => {
          let data = res.data.list;

          if (res.data.list.current_page == 1) {
            this.youList = res.data.list;
          } else {
            this.youList.data = this.youList.data.concat(res.data.list.data);
          }
          this.last_page = res.data.list.last_page;
          for (let i = 0; i < this.youList.data.length; i++) {
            this.youList.data[i].clickable = false;
          }
          console.log(this.youList, "游记");
          // // this.xingList = res.data.list;
          // if (res.data.list.current_page == 1) {
          //   this.xingList = res.data.list;
          // } else {
          //   this.xingList.data = this.xingList.data.concat(res.data.list.data);
          // }
          // this.last_page = res.data.list.last_page;
          // for (let i = 0; i < this.xingList.data.length; i++) {
          //   this.xingList.data[i].clickable = false;
          // }
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 诗心园更新
    updateShiList(index) {
      this.page = 1;
      this.last_page = 0;
      // console.log(index, 555555555);
      this.getWeiChuangShi(index + 1);
    },
    // 文心岛更新
    updateWenList(index) {
      this.page = 1;
      this.last_page = 0;
      this.getWeiChuangWen(index + 1);
    },
    colse() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.ba_img {
  margin: 0;
  background: url("/static/images/index.png") no-repeat;
  background-size: 100% 100%;

  .header {
    position: fixed;
    z-index: 999;
    width: 100%;
    // height: 120rpx;
    padding-top: 40rpx;
    box-sizing: border-box;

    .title {
      width: 100%;
      height: 120rpx;
      line-height: 120rpx;
      font-size: 38rpx;
      font-weight: 400;
      color: #eeeeee;
      text-align: center;
      position: fixed;
    }

    .jiahao {
      position: absolute;
      right: 30rpx;
      top: 80rpx;
    }
  }

  .chooseIndex {
    padding-bottom: 20rpx;
  }

  .chooseItem {
    // padding-top: 176rpx;
    padding-top: 120rpx;
  }

  .scroll_box {
    box-sizing: border-box;
  }
}

.slot-icon {
  width: 21px;
  height: 21px;
  background-color: $u-warning;
  border-radius: 100px;
  font-size: 12px;
  color: #fff;
  line-height: 21px;
  text-align: center;
}
</style>
